<sf-item-wrap [id]="id" [schema]="schema" [ui]="ui" [showError]="showError" [error]="error" [showTitle]="schema.title">
    <ng-template #ipt>
        <input
            nz-input
            [attr.id]="id"
            [disabled]="disabled"
            [attr.disabled]="disabled"
            [nzSize]="ui.size!"
            [nzBorderless]="ui.borderless"
            [ngModel]="value"
            (ngModelChange)="change($event)"
            [attr.maxLength]="schema.maxLength || null"
            [attr.type]="showPasswordFlag ? 'text' : 'password'"
            [attr.placeholder]="ui.placeholder"
            [attr.autocomplete]="ui.autocomplete"
            [attr.autoFocus]="ui.autofocus"
            (keyup.enter)="enter($event)"
            (focus)="focus($event)"
            (blur)="blur($event)"
        />
    </ng-template>

    <ng-container *ngIf="type === 'addon'; else ipt">
        <nz-input-group
            [nzAddOnBefore]="ui.addOnBefore"
            [nzAddOnBeforeIcon]="ui.addOnBeforeIcon"
            [nzPrefix]="ui.prefix"
            [nzPrefixIcon]="ui.prefixIcon"
            [nzSuffix]="passwordShowIcon"
        >
            <ng-template #passwordShowIcon>
                <ng-container *ngIf="!showPasswordFlag; else disShowPassword">
                    <span nz-icon style="cursor: pointer;" (click)="taggerShowPassword()" nzType="eye-invisible" nzTheme="outline"></span>
                </ng-container>
                <ng-template #disShowPassword>
                    <span nz-icon style="cursor: pointer;" (click)="taggerShowPassword()" nzType="eye" nzTheme="outline"></span>
                </ng-template>
            </ng-template>
            <ng-template [ngTemplateOutlet]="ipt" />
        </nz-input-group>
    </ng-container>
</sf-item-wrap>
